<template>
  <div class="blogs">
    <div class="content-header">
      <h1>博客管理<small>收藏夹</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>博客管理</el-breadcrumb-item>
        <el-breadcrumb-item>收藏夹</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--中间内容-->
    <div class="app-container">
      <div class="blog-box" style="">
      <div class="box">
        <!--    <div  class="m-container-small m-padded-tb-big">-->
        <div class="filter-container">
          <el-input placeholder="请输入标题" v-model="pagination.queryString" style="width: 200px;"
                    class="filter-item" clearable @clear="findPage"></el-input>
          <el-button @click="findPage()" icon="el-icon-search" class="dalfBut">查询博客</el-button>
        </div>
        <div class="ui container">
          <el-table size="middle" current-row-key="id" :data="dataList" stripe highlight-current-row style="user-select: none" v-loading="loading">
            <!--                        id,用户名，真实姓名，角色，备注，最后登录时间，创建时间-->
            <el-table-column type="index" min-width="15px" align="center" label="序号"></el-table-column>
            <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column prop="description" label="简介" align="center"></el-table-column>
            <el-table-column prop="type.typeName" label="类型" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" ></el-table-column>
            <el-table-column label="管理" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="toBlog(scope.row.blogId)" v-loading.fullscreen.lock="fullscreenLoading">查看博客</el-button>

                  <el-button size="mini" type="danger" slot="reference" @click="handleDelete(scope.row.blogId)" >取消收藏</el-button>
                <!--              <el-button size="mini" type="info" @click="handleForbidden(scope.row)">禁用</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              class="pagiantion"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-sizes="[2,5,10,15]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
            </el-pagination>
            </div>
        </div>
      </div>
      </div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fullscreenLoading: false,
      loading: true,
      value: {},
      pagination: { // 分页相关模型数据
        currentPage: 1, // 当前页码
        pageSize: 5, // 每页显示的记录数
        total: 0, // 总记录数
        queryString: null // 查询条件
      },
      formData: {}, // 表单数据
      dialogFormVisible: false, // 增加表单是否可见
      dialogFormVisible4Edit: false, // 编辑表单是否可见
      dataList: [], // 当前页要展示的分页列表数据
      user: {},
      nickname: '',
      // 被激活的链接地址
      avatar: '',
      rules: { // 校验规则
        // 真实姓名
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getUser()
    this.findPage()
    this.pagination.queryString=''
  },
  methods: {
    pushPostBlogs () {
      this.$router.push('/postblogs')
    },
    // 分页查询
    async findPage () {
      const this_=this
      this_.loading=true
      if(this.pagination.queryString===''){
        this.pagination.queryString=null
      }
      // 发送ajax，提交分页请求（页码，每页显示条数，查询条件)
      const { data: res } = await this.$http.get('/service-blog/Favorite/'+this.pagination.currentPage+"/"+this.pagination.pageSize+"/"+this.user.uid+"/"+this.pagination.queryString)
      // 解析controller响应回的数据
      console.log('===>' + res.flag)
      if (!res.flag) {
        return this.$message.error('获取分类列表失败！')
      }else{
        setTimeout(function () {
          this_.loading=false
          this_.pagination.total = res.total
          this_.dataList = res.Blogs
        }, 400);
      }
    },
    // 添加按钮
    handleAdd () {
      // 进行表单校验
      this.$refs.dataAddForm.validate((valid) => {
        if (valid) {
          // 表单校验通过，发ajax请求，把数据录入至后台处理
          // const param = this.$encrypTion(JSON.stringify(this.formData))
          this.$http.post('/api/types2/add', this.formData).then((res) => {
            // 关闭新增窗口
            this.dialogFormVisible = false
            if (res.data.flag) {
              // 新增成功后，重新调用分页查询方法，查询出最新的数据
              this.findPage()
              // 弹出提示信息
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            } else { // 执行失败
              this.$message.error(res.data.code)
            }
          })
        } else { // 校验不通过
          this.$message.error('校验失败，请检查输入格式')
          return false
        }
      })
    },
    getUser () {
      if(JSON.parse(window.sessionStorage.getItem("user"))!=null){
        this.user=JSON.parse(window.sessionStorage.getItem("user"))
      }else{
        this.$message.error("请先登录账号! 正在跳转登录页面......")
        this.$router.push('/login')
        setTimeout(() => {
          window.location.reload()
        }, 500)
      }
      console.log(this.user)
    },
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
      // 刷新页面，删除vuex数据
      window.location.reload()
    },
    // 切换页码
    handleCurrentChange (currentPage) {
      // 设置最新的页码
      this.pagination.currentPage = currentPage
      // 重新调用findPage方法进行分页查询
      this.findPage()
    },
    handleSizeChange (newSize) {
      this.pagination.pageSize = newSize
      this.findPage()
    },
    // 重置表单
    resetForm () {
      this.formData = {}// 重置表格数据
      this.$refs.dataAddForm.resetFields()
    },
    // 弹出添加窗口
    handleCreate () {
      this.dialogFormVisible = true
      this.resetForm()
    },
    async handleDelete (blogId) {
      this.$confirm('是否确认取消收藏该文章?', '取消收藏?', { // 确认框
      }).then(() => {
        this.$http.post(`/service-blog/Favorite/${blogId}/${this.user.uid}`).then((res) => {
        if (!res.data.flag) {
          this.$message.success(res.data.message)
          this.favoriteFlag = true
          this.findPage()
        }
      })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    // 博客详情数据显示
    toBlog(blogId){
      sessionStorage.setItem('blogId', blogId)
      this.$router.push({ path: "/blog/" + blogId });
    },
  },
  mounted () {
    // $('.ui.dropdown').dropdown({
    //   on: 'hover'
    // })
    // $('.menu.toggle').click(function () {
    //   $('.m-item').toggleClass('m-mobile-hide')
    // })
  }
}
</script>

<style lang="less" scoped>
@import "../../../assets/css/me.css";
.blog-box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.blogs {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
